{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="search-header">
        <h1>搜索结果</h1>
        <form class="search-form" action="{{ url_for('main.search') }}" method="get">
            <input type="text" name="q" value="{{ query }}" class="form-control" placeholder="搜索夫妻...">
            <button type="submit" class=""><i class="fas fa-search"></i></button>
        </form>
    </div>

    {% if query %}
    <p class="search-info">找到 {{ couples.total }} 个与 "{{ query }}" 相关的结果</p>
    {% endif %}

    <div class="grid couples-grid">
        {% for couple in couples.items %}
        <div class="card couple-card">
            <div class="couple-avatars">
                <div class="avatar-container">
                    <img src="{{ couple.husband_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                         alt="{{ couple.husband_name }}" class="avatar">
                    <span class="name">{{ couple.husband_name }}</span>
                </div>
                <div class="avatar-container">
                    <img src="{{ couple.wife_avatar or url_for('static', filename='images/default-avatar.png') }}" 
                         alt="{{ couple.wife_name }}" class="avatar">
                    <span class="name">{{ couple.wife_name }}</span>
                </div>
            </div>
            <div class="couple-info">
                <div class="info-row">
                    <span class="season">第{{ couple.season }}季</span>
                    <span class="marriage-years">结婚{{ couple.marriage_years }}年</span>
                </div>
                <div class="story-preview">
                    {{ couple.story[:100] }}...
                </div>
                <div class="card-footer">
                    <span class="likes">
                        <i class="fas fa-heart"></i> {{ couple.likes_count }}
                    </span>
                    <a href="{{ url_for('main.couple_detail', id=couple.id) }}" class="btn">了解更多</a>
                </div>
            </div>
        </div>
        {% else %}
        <div class="no-results">
            <p>没有找到相关结果</p>
        </div>
        {% endfor %}
    </div>

    {% if couples.pages > 1 %}
    <div class="pagination">
        {% if couples.has_prev %}
        <a href="{{ url_for('main.search', q=query, page=couples.prev_num) }}" class="btn">&laquo; 上一页</a>
        {% endif %}
        
        <div class="page-numbers">
            {% for page_num in range(1, couples.pages + 1) %}
                {% if page_num == couples.page %}
                    <span class="current-page">{{ page_num }}</span>
                {% else %}
                    <a href="{{ url_for('main.search', q=query, page=page_num) }}" class="page-num">{{ page_num }}</a>
                {% endif %}
            {% endfor %}
        </div>
        
        {% if couples.has_next %}
        <a href="{{ url_for('main.search', q=query, page=couples.next_num) }}" class="btn">下一页 &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %} 